<script setup lang="ts">

import { ref } from 'vue'
import { ElMessage, genFileId } from 'element-plus'
import type { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { SqlConvertControllerService } from '/@/api/openapi'
import { fileToBlob } from '/@/utils/convertUtils'
import { isNotNull, isNull } from '/@/utils/assertUtils'

const sqlString = ref<string>('')
const upload = ref<UploadInstance>()
const uploadFile = ref<UploadRawFile>()
const markdownString = ref<string>('# Hello')

const handleExceed: UploadProps['onExceed'] = (files) => {
  console.log('========tools 页面超出限制，只允许上传一个文件=========')
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  console.log(uploadFile.value)
  upload.value!.handleStart(file)
}

const submitUpload = async () => {
  console.log('======工具类tools 上传文件=====')
  console.log(uploadFile.value)
  if (uploadFile.value === undefined || uploadFile.value === null) {
    ElMessage({
      type: 'error',
      message: '请选择一个文件',
    })
    return
  }
  const blob = await fileToBlob(uploadFile.value)
  // 开始上传
  SqlConvertControllerService.convertFileSqlToMarkdown({
    file: blob,
  }).then((res) => {
    if (res.code === 200) {
      if (res.data !== undefined) {
        markdownString.value = res.data
      }
    } else {
      ElMessage({
        type: 'error',
        message: res.message,
      })
    }
  })
}

const handleChange = (uploadFile1: UploadFile, uploadFiles: UploadFiles) => {
  console.log('======工具页面tools 处理handleChange=======')
  uploadFile.value = uploadFile1.raw
}

const copy = async () => {
  try {
    await navigator.clipboard.writeText(markdownString.value)
    ElMessage({
      type: 'success',
      message: '已经复制到剪切板',
    })
  } catch (err) {
    console.error('无法复制文本: ', err)
  }
}

async function uploadOnEnter() {

  if (isNull(sqlString.value)) {
    ElMessage({
      type: 'error',
      message: '请输入正确的字符串',
    })
  }
  SqlConvertControllerService.convertSqlToMarkdown({
    sql: sqlString.value,
  }).then((res) => {
    if (res.code === 200) {
      if (res.data !== undefined) {
        markdownString.value = res.data
      }
    } else {
      ElMessage({
        type: 'error',
        message: res.message,
      })
    }
  })
}


</script>

<template>
  <el-card class="toMarkdown">
    <el-row>
      <el-col :span="12">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :limit="1"
          :on-change="handleChange"
          :on-exceed="handleExceed"
          :auto-upload="false"
        >
          <template #trigger>
            <el-button type="primary">请选择一个文件</el-button>
          </template>
          <el-button class="ml-3" type="success" @click="submitUpload">
            上传到服务器
          </el-button>
          <template #tip>
            <div class="el-upload__tip text-red">
              限制一个文件，上传一个文件会覆盖上一个文件
            </div>
          </template>
        </el-upload>
      </el-col>

      <el-col :span="12">
        <el-button type="primary" @click="copy">复制到剪切板</el-button>
      </el-col>
    </el-row>
    <el-row class="toMarkdown-body" :gutter="12">
      <el-col :span="12">
        <el-input
          type="textarea"
          style="width: 100%;height: 100%"
          :rows="20"
          placeholder="请输入内容, 按回车即可上传"
          v-model="sqlString"
          @keydown.enter.prevent="uploadOnEnter"
        ></el-input>

      </el-col>
      <el-col :span="12">
        <MdViewer :value="markdownString"></MdViewer>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="scss">
.toMarkdown {
  margin: 10px auto;
  min-height: calc(100vh - 140px);
  width: 90%;
  //background-color: #f5f7f8;
  padding: 10px;
}

.toMarkdown-body {
  width: 100%;
}
</style>